<div class="container jog-controller">

  <div class="row">
    <div class="col-3"></div>
    <div class="col-3 d-flex justify-content-center">
      <button class="btn btn-secondary" (click)="jog(0, 1, 0)">Y+
        <fa-icon icon="chevron-circle-up" size="lg"></fa-icon>
      </button>
    </div>
    <div class="col-3"></div>
    <div class="col-3 d-flex justify-content-center">
      <button class="btn btn-secondary" (click)="jog(0, 0, 1)">
        <fa-icon icon="arrow-circle-up" size="lg"></fa-icon>Z+
      </button>
    </div>
  </div>

  <div class="row">
    <div class="col-3 d-flex justify-content-center">
      <button class="btn btn-secondary" (click)="jog(-1, 0, 0)">
        <fa-icon icon="chevron-circle-left" size="lg"></fa-icon>X-
      </button>
    </div>
    <div class="col-3"></div>
    <div class="col-3 d-flex justify-content-center">
      <button class="btn btn-secondary" (click)="jog(1, 0, 0)">X+
        <fa-icon icon="chevron-circle-right" size="lg"></fa-icon>
      </button>
    </div>
    <div class="col-3"></div>
  </div>

  <div class="row">
    <div class="col-3"></div>
    <div class="col-3 d-flex justify-content-center">
      <button class="btn btn-secondary" (click)="jog(0, -1, 0)">Y-
        <fa-icon icon="chevron-circle-down" size="lg"></fa-icon>
      </button>
    </div>
    <div class="col-3"></div>
    <div class="col-3 d-flex justify-content-center">
      <button class="btn btn-secondary" (click)="jog(0, 0, -1)">Z-
        <fa-icon icon="arrow-circle-down" size="lg"></fa-icon>
      </button>
    </div>
  </div>

  <div class="form-group">
    <label>XY Step size:</label>
    <input type="number" class="form-control" [value]="settings.jogStepSizeXY" (input)="onStepSizeXYChange($event.target.value)" min="0" step="0.1" lang="en"/>
  </div>
  <div class="form-group">
    <label>Z Step size:</label>
    <input type="number" class="form-control" [value]="settings.jogStepSizeZ" (input)="onStepSizeZChange($event.target.value)" min="0" step="0.1" lang="en"/>
  </div>
  <div class="form-group">
    <label>Feed rate:</label>
    <input type="number" class="form-control" [value]="settings.jogFeedRate" (input)="onFeedRateChange($event.target.value)" min="0" step="10"/>
  </div>
</div>

